<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <button @click="fetchProduct">点击获取数据</button>
    <ul>
        <li v-for="item in products" :key="item.id">
            <input type="checkbox" v-model="selects" :value="item">
            <b>{{item.title}}</b>
        </li>
    </ul>
    <button @click="putCart">提交</button>
</div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //对于列表的这种选择,可以使用v-model进行列表绑定,初始值给空数组,配合input的value属性来使用

    let vm = new Vue({
        data: {
            //这种格式的数据就是我们开发项目常见的数据格式
            products: [],
            //购物车数据
            selects: []
        },
        methods: {
            fetchProduct() {
                //发起请求,变更products中的数据
                fetch('http://chst.vip/data/index.json')
                    .then(response => response.json())
                    .then(res => {
                        //给data中的products赋值
                        this.products = res.data;
                    })
            },
            putCart() {
                //将勾选的数据的id传递给后台的服务器
                let selectIds = this.selects.map(item => item.id);
                alert('提交成功,选中id是:' + selectIds.join(','))
            }
        }
    }).$mount('#app')
</script>